<template>
  <view class="container">
    <!-- 平台信息显示 -->
    <view class="platform-info" v-if="showPlatformInfo">
      <text class="platform-text">当前平台: {{ platformInfo.platform }}</text>
      <text class="platform-text">运行环境: {{ platformInfo.environment }}</text>
      <text class="platform-text">登录状态: {{ isAuthenticated ? '已登录' : '未登录' }}</text>
    </view>
    
    <view class="header">
      <swiper class="banner-swiper" circular autoplay interval="3000" duration="500">
        <swiper-item v-for="(img, idx) in bannerList" :key="idx">
          <image class="banner-img" :src="img" mode="widthFix" />
        </swiper-item>
      </swiper>
      <view class="welcome">欢迎使用新生报到系统</view>
    </view>
    <view class="grid">
      <view class="grid-item" v-for="item in modules" :key="item.title" @click="go(item.path)">
        <uni-icons :type="item.icon" size="40" color="#2979ff" />
        <text class="grid-title">{{ item.title }}</text>
      </view>
    </view>
    
    <!-- 测试按钮 -->
    <view class="test-section">
      <button class="test-btn" @click="togglePlatformInfo">
        {{ showPlatformInfo ? '隐藏' : '显示' }}平台信息
      </button>
      <button class="test-btn" @click="clearToken">清除登录状态</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import platformGuard from '@/utils/platform-guard.js'
import platformDetector from '@/utils/platform-detector.js'
const bannerList = ref([
  '/static/1.png',
  '/static/2.png',
  '/static/ow0xf6lj.png',
  '/static/c3.png',
  '/static/c4.png',
  '/static/c5.png',
  '/static/c6.png',
  '/static/c7.png',
  '/static/c8.png',
  '/static/c9.png'
])
const modules = ref([
  { title: '身份核验', icon: 'auth', path: '/pages/verify/index' },
  { title: '缴费', icon: 'wallet', path: '/pages/pay/index' },
  { title: '宿舍分配', icon: 'home', path: '/pages/dorm/index' },
  { title: '信息采集', icon: 'compose', path: '/pages/info/index' },
  { title: '任务看板', icon: 'list', path: '/pages/tasks/index' },
  { title: '消息通知', icon: 'email', path: '/pages/message/index' },
  { title: '导航与帮助', icon: 'map', path: '/pages/help/index' }
])

// 平台信息
const platformInfo = ref({});
const isAuthenticated = ref(false);
const showPlatformInfo = ref(false); // 可以通过长按或其他方式显示
function go(path) {
  // 使用平台守卫进行安全的页面跳转
  platformGuard.navigateTo(path)
}

// 页面加载时检查平台
onMounted(() => {
  // 获取平台信息
  platformInfo.value = platformDetector.getPlatformInfo();
  isAuthenticated.value = !!uni.getStorageSync('token');
  
  console.log('平台信息:', platformInfo.value);
  console.log('登录状态:', isAuthenticated.value);
  
  // 如果是Web端访问学生页面，给出提示
  if (platformGuard.platform === 'web') {
    uni.showModal({
      title: '提示',
      content: '这是学生端页面，建议使用微信小程序访问以获得更好的体验',
      showCancel: true,
      confirmText: '继续使用',
      cancelText: '去管理端',
      success: (res) => {
        if (res.confirm) {
          // 用户选择继续使用学生端
          console.log('用户选择继续使用学生端');
        } else {
          // 用户选择去管理端
          const token = uni.getStorageSync('token');
          if (token) {
            platformGuard.reLaunch('/pages/admin/index');
          } else {
            platformGuard.reLaunch('/pages/login/index');
          }
        }
      }
    });
  }
  
  // 长按显示平台信息（用于调试）
  uni.onLongPress(() => {
    showPlatformInfo.value = !showPlatformInfo.value;
  });
})

// 切换平台信息显示
const togglePlatformInfo = () => {
  showPlatformInfo.value = !showPlatformInfo.value;
};

// 清除登录状态
const clearToken = () => {
  uni.removeStorageSync('token');
  uni.removeStorageSync('userInfo');
  isAuthenticated.value = false;
  
  uni.showToast({
    title: '已清除登录状态',
    icon: 'success'
  });
};
</script>

<style scoped>
.container {
  padding: 0 20rpx;
}

.platform-info {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.platform-text {
  display: block;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.platform-text:last-child {
  margin-bottom: 0;
}

.test-section {
  margin-top: 40rpx;
  padding: 20rpx;
}

.test-btn {
  width: 100%;
  height: 80rpx;
  background: #2979ff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.test-btn:last-child {
  margin-bottom: 0;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}
.banner-swiper {
  width: 740rpx;
  height: 500rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}
.banner-img {
  width: 100%;
  display: block;
  border-radius: 16rpx;
}
.welcome {
  font-size: 36rpx;
  font-weight: bold;
  color: #2979ff;
  margin-bottom: 10rpx;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-item {
  width: 31%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 32rpx 0 20rpx 0;
  transition: box-shadow 0.2s;
}
.grid-item:active {
  box-shadow: 0 4rpx 16rpx #ccc;
}
.grid-title {
  margin-top: 12rpx;
  font-size: 28rpx;
  color: #333;
}
</style> 